<template>
	<view class="con">
		<!-- 搜索 -->
		<view class="search flex flex_between">
			<view class="searchz flex">
				<input class="searchz_ipt" type="number" placeholder="请输入要搜索的ID" />
				<image class="searchz_img" mode="widthFix" src="/static/search.png"></image>
			</view>
			<view class="searchy flex" :class="userInfo.f_uid==='0'?'huise':''" @click="showTan">
				<image class="searchy_img" mode="widthFix" src="/static/mine/img04.png"></image>
				<view class="searchy_v">团队指导</view>
			</view>
		</view>
		<!-- tab -->
		<view class="tabWrap flex flex_between">
			<view class="tab flex">
				<view class="tabli" :class="selectIndex===index?'active':''" v-for="(item,index) in tabList" :key="index"	@click="changTab(index)">
					<view class="tablic_1">{{item.name}}</view>
					<view class="tablic_2"></view>
				</view>
			</view>
			<view class="tabWrap_y"><text>{{total}}</text>人</view>
		</view>
		<!-- 筛选条件 -->
		<view class="shai flex flex_between">
			<view class="shaili flex">
				<view class="shaili_v" @click="changSort('reg')">注册</view>
				<image class="shaili_i" mode="widthFix" src="/static/mine/img14.png"></image>
			</view>
			<view class="shaili flex">
				<view class="shaili_v" @click="changSort('team')">团队</view>
				<image class="shaili_i" mode="widthFix" src="/static/mine/img14.png"></image>
			</view>
			<view class="shaili flex">
				<view class="shaili_v" @click="changSort('money')">收益</view>
				<image class="shaili_i" mode="widthFix" src="/static/mine/img14.png"></image>
			</view>
			<view class="shaili flex">
				<view class="shaili_v">价值</view>
				<image class="shaili_i" mode="widthFix" src="/static/mine/img14.png"></image>
			</view>
		</view>
		<!-- 列表 -->
		<view class="lieb">
			<view class="liebli" v-for="(item,index) in teamList" :key="index">
				<view class="liebli_t flex flex_between">
					<view class="liebli_tz flex">
						<image class="liebli_tz_img" :src="item.head || '/static/mine/nologin.png'"></image>
						<view class="liebli_tz_c">
              <view class="liebli_tz_c1" v-if="item.nikename!=='undefined'">{{item.nikename || ''}}</view>
							<view class="liebli_tz_c2">{{item.nicknum}}</view>
						</view>
					</view>
					<view class="liebli_ty">
						<view class="flex flex_between">
							<view></view>
							<view class="topzc_v2 flex">
								<image class="topzc_v2_img" mode="widthFix" :src="item.lv_ico"></image>
								<view class="topzc_v2_v" v-if="item.relation==='0'">全部</view>
                <view class="topzc_v2_v" v-if="item.relation==='1'">直属</view>
                <view class="topzc_v2_v" v-if="item.relation==='2'">推荐</view>
							</view>
						</view>
						
						<view class="liebli_ty2">{{item.createtime}}</view>
					</view>
				</view>
				<view class="main_c2 flex flex_between">
					<view class="main_c2li">
						<view class="main_c2li_v1">团队人数</view>
						<view class="main_c2li_v2">{{item.team_num}}</view>
					</view>
					<view class="main_c2li">
						<view class="main_c2li_v1">累计收益(元)</view>
						<view class="main_c2li_v2">{{item.money_total}}</view>
					</view>
					<view class="main_c2li">
						<view class="main_c2li_v1">创造价值(元)</view>
						<view class="main_c2li_v2">{{item.money_create}}</view>
					</view>
				</view>
			</view>
		</view>
    <!-- 团队指导-弹窗 -->
    <view class="zhezhao" v-if="isShow" @click="hideTan"></view>
    <view class="tan" v-if="isShow">
      <image class="tan_img" mode="widthFix" :src="userInfo.f_hea || '/static/mine/nologin.png'"></image>
      <view class="tan_v1">{{userInfo.f_nikename || ''}}</view>
      <view class="tan_v2">薇信号:{{userInfo.f_wx || ''}}</view>
      <view class="tan_v3" @click="copyText">复制</view>
    </view>
	</view>
</template>

<script>
  import {
    getUserTeam, //获取我的团队
  } from '@/request/api.js'
	export default {
		data() {
			return {
        // oycWz5QsRe9IbIHkgnCLwO4oWYIQ
        // openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU',
        openid:uni.getStorageSync('openid'),//获取缓存的openid
        userInfo:uni.getStorageSync('userInfo'), //获取用户头像昵称
        isShow:false,
				selectIndex: 0,
				tabList: [{
						name: '全部'
					},
					{
						name: '直属'
					},
					{
						name: '推荐'
					}
				],
        page:1,//页码
        sort:'reg',//排序类型：reg注册时间、team团队人数、money收益
        sorttype:2,//排序方式：1升序(默认)、2降序
        tui:0,//0全部、1直属、2推荐
        teamList:[],//团队列表
        total:0,//总共的人数
        pagesizes:15//每页数量
			}
		},
		onLoad() {
      console.log('获取用户头像昵称')
      console.log(this.userInfo)
      // this.getUserTeamFun() //获取我的团队
		},
    onShow() {
      // 清空数据
      this.page = 1
      this.sort = 'reg'
      this.sorttype = 2
      this.tui = 0
      this.teamList = []
      this.getUserTeamFun() //获取我的团队
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
		methods: {
      // 0全部、1直属、2推荐
			changTab(index) {
				this.selectIndex = index
        this.tui = index
        this.page = 1
        this.teamList = []
        this.getUserTeamFun()
			},
      // 排序类型：reg注册时间、team团队人数、money收益
      // 排序方式：1升序(默认)、2降序
      changSort(sort){
        this.sort = sort
        this.page = 1
        this.teamList = []
        if(this.sorttype===1){
          this.sorttype = 2
        }else{
          this.sorttype = 1
        }
        this.getUserTeamFun()
      },

      // 获取我的团队
      getUserTeamFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:this.page,
          sort:this.sort,
          sorttype:this.sorttype,
          tui:this.tui
        }
        getUserTeam(param).then(res=>{
          console.log('获取我的团队')
          console.log(res)
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          let listRe = res.data.arrList
          if(listRe.length>0){
            that.teamList = that.teamList.concat(listRe);
          }
        })
      },
      
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getUserTeamFun()
      },

      // 点击"复制"
      copyText(){
        uni.setClipboardData({
          data: this.userInfo.f_wx,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
      showTan() {
        // 有上级才弹窗弹框 "0"是指没有上级
        if(this.userInfo.f_uid!=='0'){
          this.isShow = true
        }
        // this.isShow = true
      },
      hideTan() {
      	this.isShow = false
      },
		}
	}
</script>

<style scoped lang="scss">
	.con{
		.search{
			margin-top: 20rpx;
			margin-bottom: 40rpx;
			width: 100%;
			height: auto;
			.searchz{
				width: 400rpx;
				height: 80rpx;
				line-height: 40rpx;
				border-radius: 100rpx;
				background-color: rgba(255,255,255,1);
				color: rgba(136,136,136,1);
				font-size: 28rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				.searchz_ipt{
					
				}
				.searchz_img{
					width: 48rpx;
					height: auto;
				}
			}
			.searchy{
				width: 260rpx;
				height: 80rpx;
				border-radius: 100rpx;
				background-color: rgba(249,191,65,1);
				text-align: center;
				justify-content: center;
				color: rgba(0,0,0,1);
				font-size: 28rpx;
				.searchy_img{
					width: 40rpx;
					height: auto;
					margin-right: 8rpx;
				}
			}
      .searchy.huise{
        background-color: rgba(229,229,229,1);
      }
		}
		.tabWrap{
			width: 100%;
			height: 104rpx;
			border-radius: 20rpx;
			background-color: rgba(255,255,255,1);
			padding: 0 34rpx;
			box-sizing: border-box;
			.tab {
				width: auto;
				box-sizing: border-box;
				.tabli {
					margin-right: 64rpx;
					color: rgba(16,16,16,1);
					font-size: 28rpx;
					text-align: center;
				}
			
				.tabli.active .tablic_1 {
					color: rgba(249, 191, 65, 1);
					position: relative;
					top: 2rpx;
					font-weight: bold;
				}
			
				.tabli.active .tablic_2 {
					width: 40rpx;
					height: 4rpx;
					background-color: rgba(249, 191, 65, 1);
					margin: 0 auto;
					position: relative;
					top: 6rpx;
				}
			}
			.tabWrap_y{
				color: rgba(16,16,16,1);
				font-size: 28rpx;
				text{
					font-family: 'AvantGardeFont';
				}
			}
		}
		.shai{
			width: 100%;
			height: auto;
			margin: 50rpx 0;
			.shaili{
				width: 25%;
				text-align: center;
				justify-content: center;
				.shaili_v{
					color: rgba(16,16,16,1);
					font-size: 24rpx;
					margin-right: 8rpx;
				}
				.shaili_i{
					width: 24rpx;
					height: auto;
				}
			}
		}
		.lieb{
			width: 100%;
			height: auto;
			.liebli{
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				background-color: rgba(255,255,255,1);
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				.liebli_t{
					width: 100%;
					height: auto;
					.liebli_tz{
						.liebli_tz_img{
							width: 80rpx;
							height: 80rpx;
							border-radius: 100%;
							margin-right: 20rpx;
						}
						.liebli_tz_c{
							.liebli_tz_c1{
								color: rgba(16,16,16,1);
								font-size: 28rpx;
								line-height: 40rpx;
								margin-bottom: 8rpx;
							}
							.liebli_tz_c2{
								font-family: 'AvantGardeFont';
								line-height: 34rpx;
								color: rgba(16,16,16,1);
								font-size: 24rpx;
							}
						}
					}
					.liebli_ty{
						.topzc_v2{
							border-radius: 40rpx;
							background-color: rgba(249,191,65,1);
							width: 190rpx;
							margin-bottom: 8rpx;
							.topzc_v2_img{
								width: 104rpx;
								height: 40rpx;
								border-radius: 40rpx 0px 0px 40rpx;
							}
							.topzc_v2_v{
								padding: 0 14rpx;
								padding-right: 20rpx;
								height: 40rpx;
								color: rgba(16,16,16,1);
								font-size: 24rpx;
								line-height: 40rpx;
								border-radius: 0px 40px 40px 0px;
								background-color: rgba(249,191,65,1);
								font-family: 'AvantGardeFont';
							}
						}
						.liebli_ty2{
							line-height: 34rpx;
							color: rgba(137,137,137,1);
							font-size: 24rpx;
						}
					}
				}
				.main_c2{
					margin-top: 30rpx;
					// padding-bottom: 30rpx;
					.main_c2li{
						width: 200rpx;
						height: 112rpx;
						border-radius: 10rpx;
						background-color: rgba(238,238,238,1);
						.main_c2li_v1{
							margin-left: 20rpx;
							color: rgba(137,137,137,1);
							font-size: 24rpx;
							height: 34rpx;
							line-height: 34rpx;
							margin-top: 22rpx;
						}
						.main_c2li_v2{
							margin-left: 20rpx;
							color: rgba(16,16,16,1);
							font-size: 28rpx;
							font-family: 'AvantGardeFont';
						}
					}
				}
			}
			
		}
		
		
	}
  .tan{
    width: 440rpx;
    height: 420rpx;
    border-radius: 20rpx;
    background-color: rgba(255,255,255,1);
    margin-left: -220rpx;
    margin-top: -240rpx;
    text-align: center;
    .tan_img{
      width: 160rpx;
      height: 160rpx;
      border-radius: 100%;
      margin-bottom: 18rpx;
    }
    .tan_v1{
      color: rgba(16,16,16,1);
      font-size: 32rpx;
    }
    .tan_v2{
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      margin-top: 10rpx;
      margin-bottom: 20rpx;
    }
    .tan_v3{
      width: 100rpx;
      height: 36rpx;
      line-height: 36rpx;
      border-radius: 40rpx;
      background-color: rgba(232,230,230,1);
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      margin: 0 auto;
    }
  }
</style>
